<template>
    <!-- 打卡日历页面 -->
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="日历签到" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>

        <view class="bar">
            <!-- 上一个月 -->
            <view class="previous" @click="handleCalendar(0)">
                <button class="barbtn" v-if="langType=='ch'">上一月</button>
                <button class="barbtn" v-else>Last</button>
            </view>
            <!-- 显示年月 -->
            <view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
            <!-- 下一个月 -->
            <view class="next" @click="handleCalendar(1)">
                <button class="barbtn" v-if="langType=='ch'">下一月</button>
                <button class="barbtn" v-else>Next</button>
            </view>
        </view>
        <!-- 显示星期 -->
        <view class="week" v-if="langType=='ch'">
            <view v-for="(item,index) in weeks_ch" :key="index">{{item}}</view>
        </view>
        <view class="week" v-else>
            <view v-for="(item,index) in weeks_en" :key="index">{{item}}</view>
        </view>
        <view class="myDateTable">
            <view v-for="(item,j) in days" :key="j" class='dateCell'>
                <view v-if="item.date==undefined||item.date == null" class='cell'>
                    <text :decode="true">&nbsp;&nbsp;</text>
                </view>
                <view v-else>
                    <!-- 已签到日期 -->
                    <view v-if="item.isSign == true" class='cell greenColor bgWhite  '>
                        <text>{{item.date}}</text>
                    </view>
                    <!-- 漏签 -->
                    <view @click="clickSignUp(item.date,0)" class="cell redColor bgGray"
                          v-else-if="cur_year<toYear||(cur_year==toYear&&cur_month<toMonth)||(cur_year==toYear&&cur_month==toMonth&&item.date<today)">
                        <!-- 小程序不兼容这个 v-else-if="(new Date(cur_year+'-'+cur_month+'-'+item.date))<(new Date())"> -->
                        <text>{{item.date}}</text>
                    </view>
                    <!-- 今日未签到-->
                    <view @click="clickSignUp(item.date,1)" class="cell coreshop-text-white bgBlue" v-else-if="item.date==today&&cur_month==toMonth&&cur_year==toYear">
                        <text>签到</text>
                    </view>
                    <!-- 当前日期之后 -->
                    <view class="coreshop-text-white cell" v-else>
                        <text>{{item.date}}</text>
                    </view>
                </view>

            </view>
        </view>
        <!--<view class="TipArea ">
            坚持签到<view class="impTip">可获得积分和余额</view>
        </view>-->

        <view class='count'>
            <text>截至目前，已坚持打卡</text>
            <view class='daynumber'>
                <text class='number'>{{sumCount}}</text>
                <text class='day'>天</text>
            </view>

            <view>本月累积打卡<text class="monthSum">{{dataSource.length}}</text>天</view>
            <text>请再接再厉，继续努力!</text>
        </view>

        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                days: [],
                SignUp: [],
                cur_year: 0, //当前选的年
                cur_month: 0, //当前选的月
                today: parseInt(new Date().getDate()), //本日
                toMonth: parseInt(new Date().getMonth() + 1), //本月
                toYear: parseInt(new Date().getFullYear()), //本年
                weeks_ch: ['日', '一', '二', '三', '四', '五', '六'],
                weeks_en: ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'],
                dataSource: [], //已签到的数据源
                langType: 'ch',//只是示例一个翻译而已，要想所有都翻译自己可以再加加
                sumCount: 0,
                signData: []
            };
        },
        onLoad() {
            var checkInIsOpen = this.$store.state.config.checkInIsOpen;
            if (checkInIsOpen == 2) {
                console.log('签到功能未开启');
                this.$refs.uToast.show({
                    message: "签到功能未开启", type: 'error', complete: function () {
                        uni.navigateBack({
                            delta: 1
                        });
                    }
                });
            } else {
                this.getUserCheckByMonth(this.cur_year, this.cur_month);
                this.getUserCheckCount();
            }
        },
        created() {
            this.cur_year = new Date().getFullYear();
            this.cur_month = new Date().getMonth() + 1;
            this.SignUp = this.dataSource;

            this.calculateEmptyGrids(this.cur_year, this.cur_month);
            this.calculateDays(this.cur_year, this.cur_month);
            this.onJudgeSign();
        },
        watch: {
            dataSource: 'onResChange',
        },
        computed: {
            ...mapState({
                hasLogin: state => state.hasLogin,
                userInfo: state => state.userInfo,
            }),

        },
        methods: {
            getUserCheckCount() {
                this.$u.api.getUserCheckCount().then(res => {
                    console.log(res);
                    if (res.status) {
                        this.sumCount = res.data;
                    } else {
                        this.$refs.uToast.show({ message: res.msg, type: 'error', back: false })
                    }
                });
            },
            getUserCheckByMonth(cur_year, cur_month) {
                this.$refs.uToast.show({
                    loading: false, type: 'loading',
                    title: '正在加载',
                    message: "正在加载",
                    duration: 1000
                })
                this.$u.api.getUserCheckByMonth({
                    year: cur_year,
                    month: cur_month,
                }).then(res => {
                    console.log(res);
                    if (res.status) {
                        this.dataSource = res.data;
                    } else {
                        this.$refs.uToast.show({ message: res.msg, type: 'error', back: false })
                    }
                });
            },
            goLogin() {
                this.$store.commit('showLoginTip', true);
            },
            // 获取当月共多少天
            getThisMonthDays(year, month) {
                return new Date(year, month, 0).getDate()
            },
            // 获取当月第一天星期几
            getFirstDayOfWeek(year, month) {
                return new Date(Date.UTC(year, month - 1, 1)).getDay();
            },
            // 计算当月1号前空了几个格子，把它填充在days数组的前面
            calculateEmptyGrids(year, month) {
                //计算每个月时要清零
                this.days = [];
                const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
                if (firstDayOfWeek > 0) {
                    for (let i = 0; i < firstDayOfWeek; i++) {
                        var obj = {
                            date: null,
                            isSign: false
                        }
                        this.days.push(obj);
                    }
                }
            },
            // 绘制当月天数占的格子，并把它放到days数组中
            calculateDays(year, month) {
                const thisMonthDays = this.getThisMonthDays(year, month);
                // this.columnsLen=Math.ceil(thisMonthDays/7);
                // console.log(this.columnsLen);
                for (let i = 1; i <= thisMonthDays; i++) {
                    var obj = {
                        date: i,
                        isSign: false
                    }
                    this.days.push(obj);
                }
                //console.log(this.days);
            },
            onResChange(newD, oldD) {
                this.SignUp = newD;
                this.onJudgeSign();
            },
            //匹配判断当月与当月哪些日子签到打卡
            onJudgeSign() {
                var signs = this.SignUp;
                var daysArr = this.days;
                for (var i = 0; i < signs.length; i++) {
                    var current = new Date(signs[i].replace(/-/g, "/"));
                    var year = current.getFullYear();
                    var month = current.getMonth() + 1;
                    var day = current.getDate();
                    day = parseInt(day);
                    for (var j = 0; j < daysArr.length; j++) {
                        //年月日相同则打卡成功
                        if (year == this.cur_year && month == this.cur_month && daysArr[j].date == day) { //&& signs[i].isSign == "今日已打卡"
                            // console.log(daysArr[j].date, day);
                            daysArr[j].isSign = true;
                        }
                    }
                }
                this.days = daysArr;
            },
            // 切换控制年月，上一个月，下一个月
            handleCalendar(type) {
                const cur_year = parseInt(this.cur_year);
                const cur_month = parseInt(this.cur_month);
                var newMonth;
                var newYear = cur_year;
                if (type === 0) { //上个月
                    newMonth = cur_month - 1;
                    if (newMonth < 1) {
                        newYear = cur_year - 1;
                        newMonth = 12;
                    }
                } else {
                    newMonth = cur_month + 1;
                    if (newMonth > 12) {
                        newYear = cur_year + 1;
                        newMonth = 1;
                    }
                }
                this.calculateEmptyGrids(newYear, newMonth);
                this.calculateDays(newYear, newMonth);

                this.cur_year = newYear;
                this.cur_month = newMonth;

                this.SignUp = []; //先清空

                this.getUserCheckByMonth(this.cur_year, this.cur_month);

                //this.$emit('dateChange', this.cur_year + "-" + this.cur_month); //传给调用模板页面去拿新数据
            },
            clickSignUp(date, type) { //type=0补签，type=1当日签到
                var _this = this;
                if (!this.hasLogin) {
                    this.$store.commit('showLoginTip', true);
                    return false;
                } else {
                    //如果不需要补签功能直接在这阻止不执行后面的代码就行。
                    if (type == 0) {
                        return false;
                    }
                    var postDate = this.cur_year + "-" + this.cur_month + "-" + date;
                    this.$u.api.userCheckIn({
                        date: postDate,
                    }).then(res => {
                        console.log(res);
                        if (res.status) {
                            uni.showToast({
                                title: "签到成功",
                                icon: 'success',
                                duration: 2000
                            });
                            //this.SignUp.push(this.cur_year + "-" + this.cur_month + "-" + date);
                            _this.dataSource.push(this.cur_year + "-" + this.cur_month + "-" + date);
                            console.log(_this.dataSource);
                            //_this.SignUp = _this.dataSource;
                            if (res.data) {
                                _this.sumCount = res.data.cumulativeCheckInCount;
                            }

                            _this.onJudgeSign();
                        } else {
                            this.$refs.uToast.show({ message: res.msg, type: 'error', back: false })
                        }
                    });
                    this.$forceUpdate();
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "checkIn.scss";
</style>
